<template lang="">
  <div class="center">
    <router-view />
    <div class="main">
      <div class="top">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 报销审批 -->
          <el-tab-pane label="报销审批" name="first">
            <div class="tab" style="border: 0px solid #000;margin-top: -60px;">
              <div class="box"
                style="border: 0px solid #000;width:73%;height: 40px;z-index: 10;margin-left: 400px;padding-right: 10px;position: relative;top: 80px;">
                <div class="search" style="float: left;">
                  <el-input suffix-icon="el-icon-search" placeholder="请输入姓名包含的字符" @input="realnameInput()"
                    v-model="realname" style="height: 40px;width: 260px;border-radius: 50px;overflow: hidden;">
                  </el-input>
                </div>
                <div class="ins" style="float: right;">
                  <el-button @click="output" class="button" type="danger" >导出报销</el-button>
                  <el-button @click="insert" class="button" type="danger">申请报销</el-button>
                </div>
                <div v-model="amountList">
                  <span>报销总金额：</span>
                  <span style="color: red;" v-if="amountList.data==null" >{{(parseFloat(0)).toLocaleString('zh-CN',
                    { style: 'currency', currency:
                    'cny', currencyDisplay: 'symbol' })}}</span>
                  <span style="color: red;" v-if="amountList.data!=null" >{{(parseFloat(amountList.data)).toLocaleString('zh-CN',
                    { style: 'currency', currency:
                    'cny', currencyDisplay: 'symbol' })}}</span>
                </div>
              </div>    
              <el-tabs v-model="activeName1" type="card" @tab-click="handleClickTwo" class="tabs"
                style="border: 0px solid #000;">          
                <!-- 待审批 -->
                <el-tab-pane label="待审批" name="first">
                  <el-table :data="applyList" @row-click="showCause" stripe style="width: 100%;text-align: center;">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="票据附件" style="margin-left: 100px;color:  #0060ff;">
                            <ul>
                              <li v-for="(item,index) in fileList[props.$index]" :key="index">{{item.fileTitle}}
                                <div class="cz" style="margin-left: 30px;float: right;cursor: pointer;">
                                  <!--  <i class="el-icon-delete" @click="Remove(item)"style="margin-right: 10px;"></i> -->
                                  <i class="el-icon-download" @click="outputFile(item.fileId,item.fileUrl)"></i>
                                </div>
                              </li>
                            </ul>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column prop="realname" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="reimburseType" :formatter="columnFormat" label="类型" width="80">
                    </el-table-column>
                    <el-table-column prop="businessName" label="项目" width="200">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="100"  align="right">
                      <template slot-scope="scope">
                        <span style="color:#fe0100;">
                          <!-- ￥{{scope.row.expecteEarn}} -->
                          {{ (parseFloat( scope.row.amount)).toLocaleString('zh-CN', { style: 'currency', currency:
                          'cny', currencyDisplay: 'symbol' })}}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="上次更新" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="linkmanName" label="相关人" width="150">
                    </el-table-column>
                    <el-table-column prop="reimburseStatus" label="状态" width="100" :formatter="Format">
                    </el-table-column>
                    <el-table-column prop="describes" label="说明" width="300">
                    </el-table-column>
                    <el-table-column label="操作" algin="center">
                      <template slot-scope="scope">
                        <el-button @click="examApply(scope.$index, scope.row)" class="cz-button" type="danger"><span style="position: relative;top: -6px;">审批</span>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange"
                    :page-size="size" :current-page="current" :total="total" layout="prev, pager, next">
                  </el-pagination>
                </el-tab-pane>
                <!-- 审批通过 -->
                <el-tab-pane label="审批通过" name="second">
                  <el-table :data="applyList" stripe style="width: 100%;text-align: center;">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="票据附件" style="margin-left: 100px;color:  #0060ff;">
                            <ul>
                              <li v-for="(item,index) in fileList[props.$index]" :key="index">{{item.fileTitle}}
                                <div class="cz" style="margin-left: 30px;float: right;cursor: pointer;">
                                  <!--  <i class="el-icon-delete" @click="Remove(item)"style="margin-right: 10px;"></i> -->
                                  <i class="el-icon-download" @click="outputFile(item.fileId,item.fileUrl)"></i>
                                </div>
                              </li>
                            </ul>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column prop="realname" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="reimburseType" :formatter="columnFormat" label="类型" width="80">
                    </el-table-column>
                    <el-table-column prop="businessName" label="项目" width="250">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="100"  align="right">
                      <template slot-scope="scope">
                        <span style="color:#fe0100;">
                          <!-- ￥{{scope.row.expecteEarn}} -->
                          {{ (parseFloat( scope.row.amount)).toLocaleString('zh-CN', { style: 'currency', currency:
                          'cny', currencyDisplay: 'symbol' })}}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="上次更新" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="linkmanName" label="相关人" width="150">
                    </el-table-column>
                    <el-table-column prop="describes" label="说明" width="400">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button @click="backoutApply(scope.$index, scope.row)" class="cz-button" type="danger"><span style="position: relative;top: -6px;">撤回</span></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange"
                    :page-size="size" :current-page="current" :total="total" layout="prev, pager, next">
                  </el-pagination>
                </el-tab-pane>
                <!-- 审批驳回 -->
                <!-- <el-tab-pane label="审批驳回" name="third">
                  <el-table :data="applyList" stripe style="width: 100%;text-align: center;">
                    <el-table-column prop="realname" label="姓名" width="150">
                    </el-table-column>
                    <el-table-column prop="reimburseType" :formatter="columnFormat" label="类型" width="150">
                    </el-table-column>
                    <el-table-column prop="businessName" label="项目" width="250">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="150">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="remark" label="驳回原因" width="200">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="上次更新" width="200" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button @click="backoutApply(scope.$index, scope.row)" class="cz-button">撤回</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange"
                    :page-size="size" :current-page="current" :total="total" layout="prev, pager, next">
                  </el-pagination>
                </el-tab-pane> -->
              </el-tabs>
            </div>
          </el-tab-pane>
          <!-- 我的报销 -->
          <el-tab-pane label="我的报销" name="second">
            <div class="tab" style="border: 0px solid #000;margin-top: -60px;">
              <div class="box"
                style="border: 0px solid #000;width:73%;height: 40px;z-index: 10;margin-left: 400px;padding-right: 10px;position: relative;top: 80px;">
                <div class="ins" style="float: right;">
                  <el-button @click="insert" class="button" type="danger">申请报销</el-button>

                </div>
                <div v-model="amountList">
                  <span>报销总金额：</span>
                  <span style="color: red;" v-if="amountList.data==null" >{{(parseFloat(0)).toLocaleString('zh-CN',
                    { style: 'currency', currency:
                    'cny', currencyDisplay: 'symbol' })}}</span>
                  <span style="color: red;" v-if="amountList.data!=null" >{{(parseFloat(amountList.data)).toLocaleString('zh-CN',
                    { style: 'currency', currency:
                    'cny', currencyDisplay: 'symbol' })}}</span>
                </div>
              </div>
              <el-tabs v-model="activeName1" type="card" @tab-click="handleClickMy" class="tabs" style="padding: 0;">
                <!-- 待审批 -->
                <el-tab-pane label="待审批" name="first">
                  <el-table :data="applyList" stripe style="width: 100%;text-align: center;">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="票据附件" style="margin-left: 100px;color:  #0060ff;">
                            <ul>
                              <li v-for="(item,index) in fileList[props.$index]" :key="index">{{item.fileTitle}}
                                <div class="cz" style="margin-left: 30px;float: right;cursor: pointer;">
                                   <i class="el-icon-delete" @click="Remove(item)" style="margin-right: 10px;"></i>
                                  <i class="el-icon-download" @click="outputFile(item.fileId,item.fileUrl)"></i>
                                </div>
                              </li>
                            </ul>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column prop="realname" label="姓名" width="150">
                    </el-table-column>
                    <el-table-column prop="reimburseType" :formatter="columnFormat" label="类型" width="80">
                    </el-table-column>
                    <el-table-column prop="businessName" label="项目" width="250">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="100" align="right">
                      <template slot-scope="scope">
                        <span style="color:#fe0100;">
                          <!-- ￥{{scope.row.expecteEarn}} -->
                          {{ (parseFloat( scope.row.amount)).toLocaleString('zh-CN', { style: 'currency', currency:
                          'cny', currencyDisplay: 'symbol' })}}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="reimburseStatus" label="状态" width="100" :formatter="Format">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="上次更新" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="linkmanName" label="相关人" width="100">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button @click="update(scope.row)" class="cz-button" style="margin-top: 20px;" type="danger"><span style="position: relative;top: -6px;">修改</span></el-button>
                        <el-button @click="delApply(scope.$index, scope.row)" class="cz-button" type="danger"><span style="position: relative;top: -6px;">删除</span></el-button>
                        <el-upload class="upload-demo" action="http://192.168.2.75:9050/api/file/upload"
                          :on-preview="uploadVideoProcess" multiple :on-success="handleVideoSuccess"
                          :headers='importHeaders' :file-list="fileList" :show-file-list="false">
                          <el-button  @click="curRowIndex(scope.row)" class="cz-button" 
                            style="width: 100px;position: absolute;top:32px;left: 310px;" type="danger"><span style="position: relative;top: -6px;">上传附件</span></el-button>
                        </el-upload>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange"
                    :page-size="size" :current-page="current" :total="total" layout="prev, pager, next">
                  </el-pagination>
                </el-tab-pane>
                <!-- 审批通过 -->
                <el-tab-pane label="审批通过" name="second">
                  <el-table :data="applyList" stripe style="width: 100%;text-align: center;">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="票据附件" style="margin-left: 100px;color:  #0060ff;">
                            <ul>
                              <li v-for="(item,index) in fileList[props.$index]" :key="index">{{item.fileTitle}}

                              </li>
                            </ul>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column prop="realname" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="reimburseType" :formatter="columnFormat" label="类型" width="80">
                    </el-table-column>
                    <el-table-column prop="businessName" label="项目" width="350">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="100" align="right">
                      <template slot-scope="scope">
                        <span style="color:#fe0100;">
                          <!-- ￥{{scope.row.expecteEarn}} -->
                          {{ (parseFloat( scope.row.amount)).toLocaleString('zh-CN', { style: 'currency', currency:
                          'cny', currencyDisplay: 'symbol' })}}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="上次更新" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="linkmanName" label="相关人" width="150">
                    </el-table-column>
                    <el-table-column prop="reimburseStatus" label="状态" width="100" :formatter="Format">
                    </el-table-column>
                    <el-table-column prop="describes" label="说明">
                    </el-table-column>
                  </el-table>
                  <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange"
                    :page-size="size" :current-page="current" :total="total" layout="prev, pager, next">
                  </el-pagination>
                </el-tab-pane>
                <!-- 审批驳回 -->
                <el-tab-pane label="审批驳回" name="third">
                  <el-table :data="applyList" stripe style="width: 100%;text-align: center;">
                    <el-table-column prop="realname" label="姓名" width="150">
                    </el-table-column>
                    <el-table-column prop="reimburseType" :formatter="columnFormat" label="类型" width="150">
                    </el-table-column>
                    <el-table-column prop="businessName" label="项目" width="250">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="120" align="right">
                      <template slot-scope="scope">
                        <span style="color:#fe0100;">
                          {{ (parseFloat( scope.row.amount)).toLocaleString('zh-CN', { style: 'currency', currency:
                          'cny', currencyDisplay: 'symbol' })}}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="remark" label="驳回原因" width="200">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="上次更新" width="180" :formatter="dateFormat">
                    </el-table-column>
                    <el-table-column prop="linkmanName" label="相关人" width="150">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button @click="update(scope.row)" class="cz-button" type="danger"><span style="position: relative;top: -6px;">修改</span></el-button>
                        <el-button @click="delApply(scope.$index, scope.row)" class="cz-button" type="danger"><span style="position: relative;top: -6px;">删除</span></el-button>
                      </template>

                    </el-table-column>
                  </el-table>
                  <el-pagination style="margin:20px;text-align: right;" @current-change="handleCurrentChange"
                    :page-size="size" :current-page="current" :total="total" layout="prev, pager, next">
                  </el-pagination>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-tab-pane>

        </el-tabs>
      </div>
      <div class="bottom"></div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    name: 'apply',
    inject: ['reload'],
    data() {
      return {
        realname: null,
        userId: null,
        current: 0,
        size: 5,
        total: 0,
        activeName: 'first',
        activeName1: 'first',
        applyList: [],
        statusList: [],  //状态
        amountList: [],  //报销总金额
        reimburseList:[],   //报销类型
        fileList: [],
        fileId: '',
        salesListData: [],
        reimburseType:'',
        importHeaders: {},
        reimburseId: '',
        reimburseStatus: '0',
        fileData: {
          fileUrl: '',
          createTime: '',
          salesId: '',
          userId: this.$cookies.get("userId"),
          fileTitle: '',
          fileType: '',
          remark: ''
        },

        // exelData:{}
      }
    },
    mounted() {
      this.getApplyList()
      // this.getStatusList()
      
      this.importHeaders = {
        token: sessionStorage.getItem('token'),
        // Accept: ['application/json', 'text/plain', '*/*']
      };
      // this.delApply()
    },

    methods: {
      handleCurrentChange(val) {
        this.current = val
        this.getApplyList()
      },
      // moment, //日期格式转换

      //时间格式化
      dateFormat: function (row, column) {
        // debugger
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY/MM/DD HH:mm:ss");
      },
      // 金额格式化
      amountFormat: function (row, column) {
        // debugger
        var amount = row[column.property];
        if (amount == undefined) {
          return "";
        }
        return (parseFloat(amount)).toLocaleString('zh-CN', {
          style: 'currency', currency:
            'cny', currencyDisplay: 'symbol'
        });
      },
      // 获取报销类型列表
      async getReimburseList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'ReimburseType'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.reimburseList = result.data.data
      },
      columnFormat(row, column) {
        var theDict=this.$ListToUtil.ListToDict(this.reimburseList)
        return theDict[row.reimburseType]
      }, 
      // 获取报销状态列表
      async getStatusList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'reimburseStatus'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.statusList = result.data.data
      },
      Format(row, column) {
        var theDict=this.$ListToUtil.ListToDict(this.statusList)
        return theDict[row.reimburseStatus]
      },
      showCause(row) {
        // this.$confirm(row.describes, "申请原因", {
        //   type: "info"
        // })
      },
      curRowIndex(row) {
        //  console.log(row)
        this.applyList[0] = row;
      },
      //上传附件
      handleVideoSuccess(res, file) {                               //获取上传图片地址
        this.fileFlag = false;
        this.fileUploadPercent = 0;
        // console.log(res)
        if (res.code == 200) {
          this.$message.success('文件上传成功！');
          this.addFile(file.name, file.response.data)
        } else {
          this.$message.error('文件上传失败，请重新上传！');
        }
      },
      uploadVideoProcess(event, file, fileList) {
        this.fileFlag = true;
        this.fileUploadPercent = Math.floor(file.percentage.toFixed(0));
      },
      // 添加文件
      addFile(filename, fileurl) {
        this.fileData.fileTitle = filename
        this.fileData.fileUrl = fileurl
        this.fileData.remark = this.applyList[0].reimburseId
        var data = this.fileData;
        // console.log(data)
        this.$API.file.reqAddFile(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("添加成功！");
            // this.getFileList();
          } else {
            this.$message.error("添加失败！");
          }
        })
      },
      // 删除附件
      Remove(res) {
        console.log(res);
        console.log('------------------------------');
        console.log(res.fileId);
        this.$confirm(`确定移除 ${res.fileTitle}？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
            const { fileId } = this;
            var data = {
              fileId: res.fileId
            }
            let result = this.$API.file.reqDelFile(data);
            // this.fileList.splice(fileList, 1);
            // this.reload();
            this.getApplyList()
            this.$message.success("删除成功！");
          })
      },
      // 下载附件
      outputFile(a, b) {
        console.log("---------------------")
        console.log(process.env.VUE_APP_SERVER_HOST + b);
        let link = document.createElement("a");
        link.target = "_blank"
        link.href = process.env.VUE_APP_SERVER_HOST + b;
        link.setAttribute("download", "");
        link.click();

      },
      //搜索
      async realnameInput() {
        this.getApplyList()
      },

      // 报销列表查询
      async getApplyList() {
        // 解构出参数
        const {
          current,
          size,
          reimburseStatus,
          userId,
          realname,
        } = this;
        var data = {
          current: current,
          size: size,
          reimburseStatus: reimburseStatus,
          userId: userId,

        }
        if (realname != '') {
          data.realname = realname
        }
        let result = await this.$API.apply.reqApplyList(data);
        // console.log(result)
        this.total = result.data.total;
        this.applyList = result.data.data
        this.getStatusList()
        this.getReimburseList()
        let result1 = await this.$API.apply.reqAmountList(data)
        this.total = result1.data.total;
        this.amountList = result1.data
        this.fileList = []
        for (let i = 0; i < this.applyList.length; i++) {
          let data = {
            current: 1,
            size: 100,
            remark: this.applyList[i].reimburseId,
          }
          let result1 = await this.$API.file.reqFileList(data)
          if (result1.data.code == 200) {
            if (result1.data.data.length != 0) {
              this.fileList.push(result1.data.data)
              
            } else {
              this.fileList.push([])
            }
          } else {
            this.$message.error("查询失败！");
          }

        }
      },
      //修改报销状态
      async updateApply(reimburseId, reimburseStatus, remark) {
        var data = {
          reimburseId: reimburseId,
          reimburseStatus: reimburseStatus,
          remark: remark,
        }
        let result = await this.$API.apply.reqUpdataApply(data);
        this.$message.success("修改成功！");
      },

      //审批
      examApply(index, row) {
        this.$confirm("请选择", "提示", {
          distinguishCancelAndClose: true,
          confirmButtonText: "审批通过",
          cancelButtonText: "驳回申请",
          type: "warning"
        }).then(() => {
          this.updateApply(row.reimburseId, "1", "")
          this.applyList.splice(index, 1);
        }).catch(action => {
          if (action == 'cancel') {
            this.updateApply(row.reimburseId, "2", "审批不通过")
            this.applyList.splice(index, 1);
          }
        })
      },
      // 审批驳回撤销
      backoutApply(index, row) {
        this.$confirm("是否确认撤销到待审批状态？", "提示", {
          confirmButtonText: "撤销",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.updateApply(row.reimburseId, "0", "")
          this.applyList.splice(index, 1);
        })
      },
      // 报销删除
      delApply(index, row) {
        // console.log(row)
        this.$confirm("永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",

          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // 移除对应索引位置的数据，可以对row进行设置向后台请求删除数据
            const {
              reimburseId
            } = this;
            var data = {
              reimburseId: row.reimburseId,
            }
            let result = this.$API.apply.reqDelApply(data);
            this.applyList.splice(index, 1);
            this.reload();
            this.getApplyList()
            this.$message.success("删除成功！");
          })



      },
      // 新增报销
      insert() {
        this.$router.push({
          path: '/insert'
        });
      },
      update(row) {
        this.$router.push({
          path: '/apply/update',
          name: 'applyUpdate',
          params: {
            msg: row,
          }
        });
      },
      handleClick(tab, event) {
        if (tab.name == "first") {
          //this.reimburseStatus = '0'
          this.userId = null
          this.getApplyList()
        } else if (tab.name == "second") {
          //this.reimburseStatus = '0';
          this.userId = this.$cookies.get("userId");
          this.getApplyList()
        }
      },
      handleClickTwo(tab, event) {
        //reimburseStatus:0-待审批 1-审批通过 2-驳回 3-待提交
        if (tab.name == "first") {
          this.userId = null
          this.reimburseStatus = '0'
          this.getApplyList()
        } else if (tab.name == "second") {
          this.userId = null
          this.reimburseStatus = '1'
          this.getApplyList()
        } else if (tab.name == "third") {
          this.userId = null
          this.reimburseStatus = '2'
          this.getApplyList()
        }

      },
      handleClickMy(tab, event) {
        //reimburseStatus:0-待审批 1-审批通过 2-驳回 3-待提交
        if (tab.name == "first") {
          this.reimburseStatus = '0'
          this.getApplyList()
        } else if (tab.name == "second") {
          this.reimburseStatus = '1'
          this.getApplyList()
        } else if (tab.name == "third") {
          this.reimburseStatus = '2'
          this.getApplyList()
        }

      },
      // 报销导出
      output() {
        var data = this.applyList
        var reimburseStatus = this.reimburseStatus
        // console.log(data);
        // alert(reimburseStatus)
        // 获取资源列表接口
        this.$API.file.reqOutPut(data).then(res => {
          if (res.data.code == 200) {
            this.$message.success("导出成功！");
            // console.log(res.data.data);
            let link = document.createElement("a");
            link.target = "_blank"
            link.href = process.env.VUE_APP_SERVER_HOST + "/" + res.data.data;
            link.setAttribute("download", "");
            // console.log(link.href);
            link.click();
          }
          else {
            this.$message(res.message)
          }
        });
      }
    }
  }

</script>
<style scoped>
  @import "../../../../style/style.css";

  .top {
    height: 50px;
    border: 0px solid #000;
    z-index: 0;

  }

  .top>>>.el-tabs__item {
    height: 50px;
    font-size: 16px;
    border: transparent;
    padding: 5px 30px;
  }

  .top>>>.el-tabs__item.is-hover {
    color: #fe0100;
  }

  .top>>>.el-tabs__item.is-active {
    color: #fe0100;
  }

  .top>>>.el-tabs__active-bar {
    background-color: #fe0100;
    height: 3px;
  }

  .top>>>.el-tabs__nav-wrap::after {

    width: 100%;
    height: 100px;
    background-color: #fff;
    z-index: 0;

    overflow: hidden;
  }

  .top>>>.el-tabs__nav-wrap {
    border-radius: 10px;
    padding: 0 35px;
  }

  .top>>>.el-table .cell {
    text-align: center !important;
  }

  .top>>>.el-table thead {
    font-size: 16px;
    color: #666;
  }



  .tab>>>.el-tabs--card>.el-tabs__header {
    border-bottom: none;
  }

  .tab>>>.el-tabs__header {
    margin-bottom: 0;
    margin-top: 20px;
  }

  .tab>>>.el-tabs__nav-wrap {
    border-radius: 10px;
    padding: 0;
  }

  .tab>>>.el-tabs__nav-scroll {
    background-color: #fff;
    border: none;
    height: 80px;
    transition: all 1s;
  }

  .tab>>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
    margin-left: 35px;
    border: 0px solid #000;
    border-radius: 50px;
    height: 40px;
    margin-top: 20px;
    background-color: #f5f5f7;

  }

  .tab>>>.el-tabs__item {
    font-size: 16px;
    margin-top: -1px;
    color: #b6b6b7;
    padding-top: 0px;

  }

  .tab>>>.el-tabs__item.is-active {

    color: #fff;
    height: 40px;
    border-radius: 50px;
    background-color: #fe0100;
    /* background-image: linear-gradient(to right, #0060ff, #0005cf); */
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }

  .tab>>>.el-table tr {
    cursor: pointer;
  }

  .tab>>>.el-button--primary {
    position: absolute;
    margin-left: 95px;
    margin-top: -55px;
  }

  .tabs>>>.el-form-item__label {
    color: #0060ff;
  }
</style>